<template>
  <ul class="s-menu" @mouseleave="hidePostMenu">
    <li @mouseenter="" @mouseleave="">
      <a href="//member.bilibili.com/v/video/submit.html" target="_blank">
        <i class="b-icon b-icon-vp"></i>
        <em>视频投稿</em>
      </a>
    </li>
    <li>
      <a href="//member.bilibili.com/v/#/article" target="_blank">
        <i class="b-icon b-icon-vm"></i>
        <em>投稿管理</em>
      </a>
    </li>
    <li>
      <a href="//member.bilibili.com/v/" target="_blank">
        <i class="b-icon b-icon-vc"></i>
        <em>创作中心</em>
      </a>
    </li>
  </ul>
</template>

<script>

export default {
  name: 'postmenu',
  data () {
    return {
      isShowPostMenu: false
    };
  },
  methods: {
    hidePostMenu () {
      this.$emit('isShowPostMenu', this.isShowPostMenu);
    }
  }
};
</script>

<style lang="stylus" scoped>
  .b-icon
    display inline-block
    vertical-align middle
    width 12px
    height 12px
    background url(../../../static/images/icons.d895b84.png) no-repeat
    &.b-icon-vp
      background-position -471px -919px
    &.b-icon-vm
      background-position -471px -982px
    &.b-icon-vc
      background-position -471px -1753px
  .s-menu
    position absolute
    display block
    top 42px
    right 0
    width 216px
    border none
    transition .2s
    border-radius 0 0 4px 4px
    background-color #fff
    box-shadow rgba(0, 0, 0, 0.16) 0px 2px 4px
    z-index 15
    overflow hidden
    // visibility visibility
    // opacity 0
    li
      cursor pointer
      text-align center
      width 72px
      height 64px
      transition .1s
      float left
      &:hover
        background #eee
      a
        display block
        color #f25d8e
        padding 14px 12px 0 12px
        line-height 1
        .b-icon
          display block
          width 20px
          height 20px
          margin 0 auto 8px
        em
          font-style normal
          font-weight 400
          display block
</style>
